<template>
	<div class="charge_car">
		<div class="charge_left">
			<Title analysisTitle="充电数据统计"></Title>
			<div class="echarts bgItem">
				<div class="echarts_select">
					<div :class="dayCount == 1 ? 'active' : ''" @click="handleDay(1)">近30天</div>
					<div :class="dayCount == 2 ? 'active' : ''" @click="handleDay(2)">近12月</div>
					<div :class="dayCount == 3 ? 'active' : ''" @click="handleDay(3)">全部</div>
				</div>
				<PieThree :chartData="getuserAnalysisData"></PieThree>
				<div class="pie_bom">
					<div class="left">
						<Pie :chartData="avaChart" seriesColor="#8146ff"></Pie>
					</div>
					<div class="right">
						<Pie :chartData="avaChart2" seriesColor="#ff9447"></Pie>
					</div>
				</div>
			</div>
			<Title analysisTitle="近30天充电极值"></Title>
			<div class="echarts2 bgItem">
				<div class="extreme">
					<div class="extreme_item">
						<div class="circle color1"></div>
						<div class="text">最高输入电压：{{ chargingValueFor30DaysAnalysisData.maxInputVoltage }}V</div>
					</div>
					<div class="extreme_item">
						<div class="circle color2"></div>
						<div class="text">最高输入电流：{{ chargingValueFor30DaysAnalysisData.maxInputCurrent }}A</div>
					</div>
				</div>
				<div class="extreme">
					<div class="extreme_item">
						<div class="circle color3"></div>
						<div class="text">电池最高温度：{{ chargingValueFor30DaysAnalysisData.maxTemperature }}V</div>
					</div>
					<div class="extreme_item">
						<div class="circle color4"></div>
						<div class="text">电池最大温差：{{ chargingValueFor30DaysAnalysisData.maxTemperatureDifference }}A</div>
					</div>
				</div>
				<div class="extreme">
					<div class="extreme_item">
						<div class="circle color5"></div>
						<div class="text">最大温升速率：{{ chargingValueFor30DaysAnalysisData.maxTemperatureRiseRate }}V</div>
					</div>
					<div class="extreme_item">
						<div class="circle color6"></div>
						<div class="text">电池最大压差：{{ chargingValueFor30DaysAnalysisData.maxInputVoltageDifference }}A</div>
					</div>
				</div>
			</div>
		</div>
		<div class="charge_center">
			<div class="img_bg"><img src="../../../../assets/images/overviewAnalysis/car.png" alt="" /></div>

			<div class="center_bom">
				<div class="center_bom_info">
					<div class="left">
						<img src="../../../../assets/images/overviewAnalysis/u175.svg" alt="" />
					</div>
					<div class="right">
						<div>高风险充电预警</div>
						<div style="color: #be1e26">{{ chargingHighWarnNum }}个</div>
					</div>
				</div>
				<div class="text">*数据取自近一年充电预警</div>
			</div>
		</div>
		<div class="charge_right">
			<Title analysisTitle="充电时长分析"></Title>
			<div class="echarts3 bgItem">
				<ChargeTime :chartData="chargeTimeData" seriesColor="#fff" height="280px" />
			</div>
			<Title analysisTitle="充电起止SOC统计"></Title>
			<div class="echarts4 bgItem">
				<div class="soc_tit">
					<div>SOC（%）</div>
					<div>
						平均起/止SOC：<span style="color: #ba463b"> {{ socStart }}% </span>- <span style="color: #1c743e"> {{ socend }}%</span>
					</div>
					<div>*数据取自近15次充电订单</div>
				</div>
				<BarMore :chartData="chargeSOCData" height="210px"></BarMore>
			</div>
		</div>
	</div>
</template>
<script lang="js" setup>
	import {ref, reactive, computed, onMounted} from 'vue';
	import Title from './Title.vue';
	import PieThree from './chart/PieThree.vue';
	import Pie from './chart/Pie.vue';
	import ChargeTime from '../../OverviewAnalysis/components/chart/ChargeTime.vue';
	import BarMore from './chart/BarMore.vue';
	import {getuserAnalysis, getchargingValueFor30DaysAnalysis, getchargingTimeAnalysis, getchargingStartEndSOC} from '@/api/screen/UserAnalysisdetails.js';
	import dayjs from 'dayjs';
	const props = defineProps({
		vinData: {
			type: String,
		},
	});
	onMounted(() => {
		getuserAnalysisApi({vin: props.vinData});
		getchargingValueFor30DaysAnalysisApi({vin: props.vinData});
		getchargingTimeAnalysisApi({vin: props.vinData});
		getchargingStartEndSOCApi({vin: props.vinData});
	});
	const avaChart = ref({
		count: 11,
		ratio: 0.16,
		lastYear: 15,
		YOY: 14.5,
		name: '单次平均充电量',
		unit: '(度)',
	});
	const avaChart2 = ref({
		count: 22,
		ratio: 0.16,
		lastYear: 15,
		YOY: 14.5,
		name: '单次平均充电时长',
		unit: '（分钟）',
	});
	const chargingHighWarnNum = ref(0);
	const getuserAnalysisData = ref({});
	const getuserAnalysisApiParams = ref({
		vin: props.vinData,
		pageNo: 1,
		pageSize: 1,
		startTime: dayjs().add(-1, 'M').format('YYYY-MM-DD hh:mm:ss'),
		endTime: dayjs().format('YYYY-MM-DD hh:mm:ss'),
	});
	function getuserAnalysisApi() {
		// 获取充电订单列表接口
		getuserAnalysis(getuserAnalysisApiParams.value).then((res) => {
			console.log('getuserAnalysis', res);
			getuserAnalysisData.value = res.records[0];
			avaChart.value.count = res.records[0].avgElectricEnergy;
			avaChart2.value.count = res.records[0].avgChargingTime;
			chargingHighWarnNum.value = res.records[0].chargingHighWarnNum;
		});
	}

	const chargingValueFor30DaysAnalysisData = ref({});
	function getchargingValueFor30DaysAnalysisApi(params) {
		// 近30天充电极值
		getchargingValueFor30DaysAnalysis(params).then((res) => {
			chargingValueFor30DaysAnalysisData.value = res;
		});
	}
	const chargeTimeData = ref([
		{name: '>13h', value: 4},
		{name: '1.5h~3h', value: 23},
		{name: '1h~1.5h', value: 34},
		{name: '0.5~1h', value: 47},
		{name: '<0.5h', value: 62},
	]);
	function getchargingTimeAnalysisApi(params) {
		// 充电时长分析
		getchargingTimeAnalysis(params).then((res) => {
			console.log('getchargingTimeAnalysis', res);
			chargeTimeData.value = res.map((item) => {
				return {
					name: item.remark,
					value: item.times,
					timesRate: item.timesRate,
				};
			});
		});
	}
	const chargeSOCData = ref([]);
	const socStart = ref(0);
	const socend = ref(0);
	function getchargingStartEndSOCApi(params) {
		// 充电起止SOC
		getchargingStartEndSOC(params).then((res) => {
			console.log('getchargingStartEndSOC', res);
			socStart.value = res.avgStartSOC;
			socend.value = res.avgEndSOC;
			chargeSOCData.value = res.list.map((item, index) => {
				return {
					name: index + 1,
					valueBegin: item.startSOC,
					valueEnd: item.endSOC,
				};
			});
		});
	}

	let dayCount = ref(1);

	const handleDay = (type) => {
		dayCount.value = type;
		switch (type) {
			case 1:
				getuserAnalysisApiParams.value.startTime = dayjs().add(-1, 'M').format('YYYY-MM-DD hh:mm:ss');
				getuserAnalysisApiParams.value.endTime = dayjs().format('YYYY-MM-DD hh:mm:ss');
				getuserAnalysisApi();
				break;
			case 2:
				getuserAnalysisApiParams.value.startTime = dayjs().add(-12, 'M').format('YYYY-MM-DD hh:mm:ss');
				getuserAnalysisApiParams.value.endTime = dayjs().format('YYYY-MM-DD hh:mm:ss');
				getuserAnalysisApi();

				break;
			case 3:
				getuserAnalysisApiParams.value.startTime = dayjs().add(-120, 'M').format('YYYY-MM-DD hh:mm:ss');
				getuserAnalysisApiParams.value.endTime = dayjs().format('YYYY-MM-DD hh:mm:ss');
				getuserAnalysisApi();

				break;
			default:
				break;
		}
	};
</script>

<style lang="less" scoped>
	.charge_car {
		display: flex;
		justify-content: space-between;

		.charge_left {
			width: 34%;
			min-width: 320px;

			.echarts {
				height: 20.625rem;

				background-color: rgba(12, 24, 45, 1);
				margin-bottom: 1.25rem;

				.echarts_select {
					padding-top: 1rem;
					line-height: 1.25rem;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-end;

					div {
						width: 4rem;
						height: 1rem;
						cursor: pointer;
						color: #46a6ff;
						font-size: 0.875rem;
						text-align: center;
						line-height: 1rem;
					}

					.active {
						background: url('../../../../assets/images/overviewAnalysis/u25.svg');
						background-size: 100% 100%;
					}
				}

				.pie_bom {
					box-sizing: border-box;
					padding-left: 10%;
					display: flex;

					.left {
						width: 40%;
					}

					.right {
						width: 40%;
					}
				}
			}

			.echarts2 {
				box-sizing: border-box;
				margin-bottom: 1.25rem;
				height: 8.5rem;

				background-color: rgba(12, 24, 45, 1);
				padding: 1.25rem 0;

				.extreme {
					padding: 0 0.75rem 1.25rem 0.75rem;
					display: flex;
					justify-content: space-between;

					.extreme_item {
						display: flex;
						align-items: center;
						width: 50%;

						.circle {
							height: 0.625rem;
							width: 0.625rem;
							border-radius: 50%;

							margin-right: 0.625rem;
						}

						.color1 {
							background: #1890ff;
						}

						.color2 {
							background: #30cb2e;
						}

						.color3 {
							background: #f8e24c;
						}

						.color4 {
							background: #ff9447;
						}

						.color5 {
							background: #8477eb;
						}

						.color6 {
							background: #30e8bb;
						}

						.text {
							color: #7d8590;
							font-size: 0.75rem;
						}
					}
				}
			}
		}

		.charge_center {
			width: 27%;
			min-width: 260px;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 4.0625rem;

			.img_bg {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				margin-bottom: 1.875rem;

				img {
					width: 14.25rem;
					height: 24.25rem;
				}
			}

			.center_bom {
				width: 67%;

				.center_bom_info {
					display: flex;
					margin-bottom: 0.5rem;

					.left {
						width: 1.6875rem;
						height: 1.625rem;
						background-color: rgba(240, 90, 45, 1);
						display: flex;
						justify-content: center;
						align-items: center;

						img {
							width: 1.25rem;
							height: 16px;
						}
					}

					.right {
						width: calc(100% - 1.6875rem);
						height: 1.625rem;
						display: flex;
						justify-content: space-between;
						align-items: center;
						background: url('../../../../assets/images/overviewAnalysis/u172.svg');
						background-size: 100% 100%;
						font-size: 1rem;
						color: #fff;
						padding-left: 1rem;
					}
				}

				.text {
					font-size: 0.625rem;
					color: #7d8590;
					text-align: center;
				}
			}
		}

		.charge_right {
			width: 39%;
			min-width: 384px;

			.echarts3 {
				height: 13.625rem;
				margin-bottom: 1.25rem;

				background-color: rgba(12, 24, 45, 1);
			}

			.echarts4 {
				height: 15.5rem;
				margin-bottom: 1.25rem;

				background-color: rgba(12, 24, 45, 1);

				.soc_tit {
					// padding-top: .75rem;
					display: flex;
					justify-content: space-between;
					font-size: 0.75rem;
					color: #7d8590;
					padding: 0.75rem 0.75rem 0 0.75rem;

					div:nth-child(3) {
						font-size: 0.625rem;
					}
				}
			}
		}
	}

	.bgItem {
		background-image: linear-gradient(transparent 10px, #0c182d 10px, #0c182d calc(100% - 10px), transparent calc(100% - 10px), transparent 100%), linear-gradient(90deg, transparent 10px, #0c182d 10px, #0c182d calc(100% - 10px), transparent calc(100% - 10px), transparent 100%), linear-gradient(#6f9bdd 1px, transparent 1px, transparent calc(100% - 1px), #6f9bdd calc(100% - 1px), #6f9bdd 100%), linear-gradient(90deg, #6f9bdd 1px, transparent 1px, transparent calc(100% - 1px), #6f9bdd calc(100% - 1px), #6f9bdd 100%);
		background-repeat: no-repeat;
		background-position:
			top left,
			top left,
			bottom right,
			bottom right;
		background-size:
			100% 100%,
			100% 100%;
	}
</style>
